{% extends "_base.html" %}
{% block title %}新建商品{% endblock %}
{% block script %}
<script type="text/javascript" src="/static/script/Validate.js"></script>
<script>
$(function(){
	// 表单检查项
	form_list = {
		"#form-itemname" : check_itemname,
		"#form-tags" : check_tags,
		"#form-price" : check_price,
		"#form-detail" : check_detail,
	};
	
	// 提交按钮
	$( "#form-submit" ).button().click(function(){
		res = check_form(form_list);
		if( !res ){
			$("#dialog p").text("您有未填写完整的选项。");
			$("#dialog").dialog("open");
			return false;
		}
		if ( $("#form-photo").val() == "" ){
			// 图片单独检查
			$("#dialog p").text("您未选择上传的图片。");
			$("#dialog").dialog("open");
			return false;
		}
		return true;
	});
	
	// 注册表单检查
	check_by_dict(form_list);
	
	// 显示图片
	default_image = "/static/image/default.jpg";
	function showImage(){
		this_obj = $(this);
		this_id = this_obj.attr("id");
		file_name = this_obj.val();
		image = $("#form-photo-preview");
		
		re = /.\.(jpeg|jpg|png)$/i;
		if( !re.test(this_obj.val()) ){
			//验证格式
			$("#dialog p").text("图片格式错误");
			$("#dialog").dialog("open");
			imgFilePath = default_image
			this_obj.val("");
		}
		else{
			imgFile = document.getElementById(this_id);
			imgFilePath = window.URL.createObjectURL(imgFile.files[0]);
			if( !checkImageSize(this_id) ){
				$("#dialog p").text("图片大小不符合要求");
				$("#dialog").dialog("open");
				imgFilePath = default_image
				this_obj.val("");
			}
		}
		image.get(0).src = imgFilePath;
		
		temp_image = new Image();
		temp_image.onload = function(){
			WidthMax = 1000;
			WidthMin = 200;
			HeightMax = 500;
			HeightMin = 100;
			width = temp_image.width;
			height = temp_image.height;
			if( width>WidthMax || width<WidthMin || height>HeightMax || height<HeightMin ){
				$("#dialog p").text("图片尺寸不符合要求");
				$("#dialog").dialog("open");
				this_obj.val("");
				image.get(0).src = default_image;
			}
		}
		temp_image.src = imgFilePath;
	}
	$("#form-photo").change(showImage);
});
</script>
{% endblock %}
{% block content %}
<form id="normal-form" action="/item/newproc" method="post" enctype='multipart/form-data'>
	<div class="input-row">
		<label class="input-label" for="itemname">商品名 *</label>
		<input class="input-text" type="text" id="form-itemname" name="itemname" />
	</div>
	<div class="notice-row">
		<label class="notice-label">中英文、数字和部分符号，长度6-30之间（一个汉字长度算3）</label>
	</div>
	<div class="input-row input-row-photo">
		<label class="input-label" for="photo">商品图片 *</label>
		<div class="form-photo-wrapper">
			<img src="/static/image/default.jpg" id="form-photo-preview"/>
			<div class="ui-state-default ui-corner-all form-photo-file">
				<span class="ui-icon ui-icon-image"></span>
				<input id="form-photo" type='file' name='photo' title="上传图片"/>
			</div>
		</div>
	</div>
	<div class="notice-row">
		<label class="notice-label">图片格式为jpg、jpeg或png，大小不能超过100K，尺寸在100x200到500x1000之间</label>
	</div>
	<div class="input-row">
		<label class="input-label" for="tags">标签 *</label>
		<input class="input-text input-text-long" type="text" id="form-tags" name="tags" />
	</div>
	<div class="notice-row">
		<label class="notice-label">逗号分隔，不超过5个，只允许中英文和数字，长度4-12之间（一个汉字长度算3）</label>
	</div>
	<div class="input-row">
		<label class="input-label" for="price">价格 *</label>
		<input class="input-text input-text-short" type="text" id="form-price" name="price" /> 元
	</div>
	<div class="notice-row">
		<label class="notice-label">请输入商品价格，不超过8位数</label>
	</div>
	<div class="input-row input-row-multi">
		<label class="input-label" for="detail">详情描述 *</label>
		<textarea class="input-text input-text-multi" type="text" id="form-detail" name="detail" ></textarea>
	</div>
	<div class="notice-row">
		<label class="notice-label">请输入商品详细介绍，长度在20-1000之间（一个汉字长度算3）</label>
	</div>
	<div class="submit-row">
                <input type="hidden" name='token' value="{{_session['token']}}" />
		<input id='form-submit' type="submit" value="发布" />
	</div>
</form>
{% endblock %}
